<template>
	<view class="historyOrder">
		<view class="back-to-available" @click="toHistoryPage">
			<img class="back" src="@/static/tabbar/back.png" alt="back">
			返回
		</view>
		
		<map name="">
			
		</map>
		
		<view class="main">
			<view class="order-id">
				订单编号：
			</view>
			<view class="from-to">
				<view class="sender-place">
					福建
				</view>
				<view class="">
					<img src="@/static/tabbar/arrowFinished.png" alt="">
				</view>
				<view class="receiver-place">
					上海
				</view>
			</view>
			<view class="receiver">
				<view class="name-icon">
					寄
				</view>
				<view class="name">
					
				</view>
			</view>
			<view class="sender">
				<view class="name-icon">
					收
				</view>
				<view class="name">
					
				</view>
			</view>
			<view class="package-info">
				<text>物品类型：</text>
				<text>物品重量：</text>
				<text>备注：</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		methods:{
			toHistoryPage(){
				uni.switchTab({
					url: '../tabbar/task/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -9rpx;
	}
	.historyOrder {
		padding: 30rpx 50rpx;
		font-size: 32rpx;
		line-height: 50rpx;
		
		.main {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			
			.order-id {
				height: 60rpx;
				line-height: 60rpx;
				border-bottom: 1px solid #ddd;
			}
			
			.from-to {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 150rpx;
				border-bottom: 1px solid #ddd;
				font-weight: bold;
			
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			
			.receiver,
			.sender {
				padding: 30rpx 0;
				border-bottom: 1px solid #ddd;
			
				.name {
					display: flex;
					align-items: center;
			
					
				}
				
				.name-icon {
					display: block;
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 50%;
					background-color: #ffe4d3;
					color: #d49386;
					margin-right: 20rpx;
				}
				
				
			}
			.package-info {
				padding: 30rpx 0 0;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>